import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Next.js

NativeWind can be used in a Next.js project that is already configured to use Expo or framework-less React Native Web.

Setting up a new Next.js project to use React Native Web is out of scope for these instructions.

## 1. Setup Tailwind CSS

Simply configure Next.js as per [the Tailwind CSS Next.js setup guide](https://tailwindcss.com/docs/guides/nextjs)

## 2. Add the NativeWind preset

```diff title="tailwind.config.js"

module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
  ],
+ presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
}
```

## 3. Update import source

NativeWind requires the `jsxImportSource` to be set to `nativewind`. The option to configure this depends on how you are compiling your Next.js project.

<Tabs groupId="compiler">
  <TabItem value="swc" label="SWC">
    Next.js uses a `jsconfig.json`/`tsconfig.json` file to configure the `jsxImportSource`.

    ```json title="tsconfig.json"
    {
      "compilerOptions": {
        "jsxImportSource": "nativewind"
      }
    }
    ```
  </TabItem>
  <TabItem value="babel" label="Babel">

```diff title="babel.config.js"
module.exports = {
  presets: ["next/babel"],
+  plugins: [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        runtime: "automatic",
+        importSource: "nativewind",
+      },
+    ],
+  ],
};

```
  </TabItem>
</Tabs>

## 4. Transpile NativeWind

```diff title="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+  transpilePackages: ["nativewind", "react-native-css-interop"],
}
```

## Common issues

### Errors about package imports.

```
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^

SyntaxError: Cannot use import statement outside a module
```

This signals that you have incorrectly setup React Native Web and/or a dependency needs to be added to `transpilePackages`. This is out of scope for NativeWind.

### Styles are not being applied

A common issue with Next.js is your styles are imported, but are being overridden by another StyleSheet due to the stylesheet import order.

A simple fix is simply make the Tailwind styles a higher specificity.

```diff title=tailwind.config.json
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
  ],
  plugins: [require('nativewind/tailwind/css')],
+ important: 'html',
  theme: {
    extend: {},
  },
}
```
